<template>
  <div>
    <my-header-2></my-header-2><my-header-1></my-header-1>
    <div class="video-nav">
      <router-link to="/video/recom" class="video-nav-item">
        <h2>推荐</h2> </router-link
      ><router-link to="/video/preshow" class="video-nav-item">
        <h2>预告片</h2> </router-link
      ><router-link to="/video/jiedu" class="video-nav-item">
        <h2>热片解读</h2> </router-link
      ><router-link to="/video/say" class="video-nav-item">
        <h2>说电影</h2>
      </router-link>
      <router-link to="/video/yule" class="video-nav-item">
        <h2>娱乐</h2>
      </router-link>
    </div>
    <router-view />
  </div>
</template>


<script>
import axios from "axios";
import MyHeader1 from "../components/MyHeader1.vue";
import MyHeader2 from "../components/MyHeader2.vue";
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Movie",
  components: {
    MyHeader1,
    MyHeader2,
  },
  data() {
    return {
      short_video_list: [],
      images_url: [],
    };
  },
  mounted() {
    axios
      .get(
        "/asgard/asgardapi/sns/common/feed/channel/list.json?uuid=C10473F0B63111EC96A423315972D0ED4A926011D3A340318A3710511DF2C8B3&channelId=4&feedChannelId=105&timestamp=1649642836175&offset=10"
      )
      .then((res) => {
        console.log(res);
        // eslint-disable-next-line vue/no-mutating-props
        this.short_video_list = res.data.data.feeds;
      });
  },
};
</script>

<style scoped lang="less">
.video-nav {
  display: flex;
  justify-content: space-around;
  padding-right: 30px;
  height: 40px;
  padding-top: 10px;
  a {
    font-size: 0.4267rem;
    height: 1.1733rem;
    color: #666;
    font-weight: 700;
    text-align: center;
    margin: 0 1.33333333vw;
    text-decoration: none;
    &.router-link-exact-active {
      h2 {
        color: #333;
        font-size: 0.48rem;
        padding-bottom: 4px;
        border-bottom: 2px solid red;
      }
    }
    h2 {
      display: inline;
      font-size: 0.4267rem;
      font-weight: 700;
    }
  }
}
</style>